import React from "react";
import style from "./style.module.scss";
import { MyNavBar } from "../../../components";
import myIconNext from "../../../assets/images/icon/common resource/hdpi/my_icon_next_n.png";
import { useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../../store/hooks";
import { userQuit } from "../../../store/user/userSlice";

const Index: React.FC = () => {
  const state = useAppSelector((state) => state.user as any);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const userInfo = useAppSelector((state) => {
    return state.user.userInfo;
  });
  const signOut = () => {
    dispatch(userQuit(state));
    navigate("/home");
  };
  return (
    <div className={style.setPage}>
      <MyNavBar
        title="设置"
        style={{ backgroundColor: "#fff" }}
        onClickLeft={() => navigate(-1)}
      ></MyNavBar>
      {/* 设置内容 */}
      <div className={style.setMain}>
        {/* 个人信息 */}
        <div
          className={style.userInformation}
          onClick={() => navigate("/set/person/infomation")}
        >
          <div className={style.userAvatar}>
            {/* 用户头像 */}
            <img src={userInfo.headPic} alt="" />
            {/* 用户名称 */}
            <div>{userInfo.nickName}</div>
          </div>
          <img src={myIconNext} alt="" />
        </div>
        {/* 修改密码 */}
        <div
          className={style.editPassword}
          onClick={() => navigate("/set/change/password")}
        >
          <div>修改密码</div>
          <img src={myIconNext} alt="" />
        </div>

        <div className={style.cache_screen_versions}>
          {/* 清除缓存 */}
          <div className={style.clearCache}>
            <div>清除缓存</div>
            <div className={style.cache_box}>
              <div>10M</div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
          {/* 屏幕亮度 */}
          <div
            className={style.screenBrightness}
            onClick={() => navigate("/set/screen/brightness")}
          >
            <div>屏幕亮度</div>
            <img src={myIconNext} alt="" />
          </div>
          {/* 版本检测 */}
          <div
            className={style.versionsDetection}
            onClick={() => navigate("/set/version/detection")}
          >
            <div>版本检测</div>
            <img src={myIconNext} alt="" />
          </div>
        </div>

        <div className={style.helpCenter_aboutUs}>
          {/* 帮助中心 */}
          <div className={style.helpCenter}>
            <div>帮助中心</div>
            <img src={myIconNext} alt="" />
          </div>
          {/* 关于我们 */}
          <div className={style.aboutUs}>
            <div>关于我们</div>
            <img src={myIconNext} alt="" />
          </div>
        </div>

        {/* 邀请好友 */}
        <div
          className={style.inviteFriends}
          onClick={() => navigate("/set/invite/friends")}
        >
          <div>邀请好友</div>
          <img src={myIconNext} alt="" />
        </div>
        {/* 退出登录 */}
        <div className={style.logOut} onClick={() => signOut()}>
          退出登录
        </div>

        {/* 底部空白*/}
        <div className={style.footer}></div>
      </div>
    </div>
  );
};

export default Index;
